<template>
  <div class="recomments-container">
    <h2 class="title">{{ bookDetail.title }}</h2>

    <!-- 显示书单内容 -->
    <div class="book-info">
      <p><strong>书单内容：</strong>{{ bookDetail.content }}</p>
      <p><strong>创建者：</strong>{{ bookDetail.user_id }}</p>
      <p><strong>评分：</strong>
        <el-rate v-model="bookDetail.star" disabled show-score text-color="#ff9900" />
      </p>
      <p><strong>创建时间：</strong>{{ bookDetail.time }}</p>
      <p><strong>浏览次数：</strong>{{ bookDetail.view_sum }}</p>
      <el-button type="primary" @click="showShareModal">分享书单</el-button>
<el-dialog title="分享书单" v-model="shareDialogVisible">
  <div style="text-align: center;">
    <p>分享链接：</p>
    <el-input v-model="shareLink" readonly style="width: 80%; margin-bottom: 20px;" />
    <el-button type="success" @click="copyLink">复制链接</el-button>
    <p>二维码：</p>
    <canvas id="qrcode"></canvas>
  </div>
</el-dialog>
      <!-- 显示书单图片 -->
      <div v-if="bookDetail.img_url" class="image-preview">
        <img :src="bookDetail.img_url" alt="书单图片" />
      </div>
    </div>

    <!-- 横向列表显示包含的图书 -->
    <h3 class="section-title">包含的图书</h3>
    <div class="book-list">
      <el-card
        v-for="book in books"
        :key="book.id"
        class="book-card"
        :body-style="{ padding: '10px' }"
        @click="$emit('navigateToBookDetail', book.id)"
      >
        <img :src="book.img_url" alt="图书图片" />
        <p class="book-name">{{ book.name }}</p>
        <p class="book-author">作者：{{ book.auther }}</p>
      </el-card>
    </div>

    <!-- 返回按钮 -->
    <el-button type="default" @click="back" class="back-button">返回</el-button>
  </div>
</template>

<script setup>
import { defineProps, getCurrentInstance, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import QRCode from 'qrcode'

const shareDialogVisible = ref(false);
const shareLink = ref('');

const showShareModal = async () => {
  shareDialogVisible.value = true;

  // 生成分享链接
  shareLink.value = `${window.location.origin}/booklist/${props.bookDetail.id}`;

  // 生成二维码
  const qrcodeContainer = document.getElementById('qrcode');
  qrcodeContainer.innerHTML = ''; // 清空旧的二维码
  await QRCode.toCanvas(qrcodeContainer, shareLink.value, { width: 200 });
};

const copyLink = () => {
  navigator.clipboard.writeText(shareLink.value);
  ElMessage.success('链接已复制到剪贴板');
};
const { proxy } = getCurrentInstance();

// 接收父组件传递的书单详情
const props = defineProps({
  bookDetail: {
    type: Object,
    required: true,
  },
});

// 存储包含的图书列表
const books = ref([]);

// 返回到书单列表
const back = () => {
  proxy.$emit('navigateTorecommend');
};

// 获取书单中的图书详情
const fetchBooks = async () => {
  try {
    // 请求书单中包含的图书 ID 列表
    const response = await proxy.$axios.get(`/booklist/${props.bookDetail.id}`);
    const booklistData = response.data.data;

    // 清空旧数据，避免累积
    books.value = [];

    // 批量加载每本书的详情
    const bookDetails = await Promise.all(
      booklistData.map(async (item) => {
        const bookResponse = await proxy.$axios.get(`/book/${item.book_id}`);
        return bookResponse.data.data;
      })
    );

    books.value = bookDetails;
  } catch (error) {
    console.error('Error fetching books:', error);
    ElMessage.error('加载书单图书失败');
  }
};

// 监听 props.bookDetail 的变化并刷新数据
watch(
  () => props.bookDetail,
  (newVal, oldVal) => {
    if (newVal.id !== oldVal?.id) {
      fetchBooks(); // 当书单详情发生变化时重新加载数据
    }
  },
  { immediate: true } // 初始加载时也调用一次
);
</script>

<style scoped>
.recomments-container {
  width: 700px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.book-info {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.6;
}

.image-preview {
  margin-top: 20px;
  text-align: center;
}

.image-preview img {
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.section-title {
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

.book-list {
  display: flex;
  gap: 15px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  justify-content: center;
}

.book-list::-webkit-scrollbar {
  height: 8px;
}

.book-list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.book-card {
  flex-shrink: 0;
  width: 180px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.book-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.book-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.book-name {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
}

.book-author {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

.back-button {
  margin-top: 20px;
  display: block;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
</style>
